// @import "common.less"

@import "common.less";

// body {
//   min-width: 320px;
//   width: 15rem;
//   margin: 0 auto;
//   line-height: 1.5;
//   font-family: Arial, Helvetica;
//   background: #F2F2F2;
// }

body {
  min-width: 320px;
  width: 15rem;
  margin: 0 auto;
  line-height: 1.5;
  font-family: Arial, Helvetica;
  background: #F2F2F2;
}

div {
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

@baseFont: 50;
// 顶部搜索区域

.search_conent {
  width: 15rem;
  height: 88rem / @baseFont;
  background-color: #F7C033;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  .search_main {
    height: 88rem / @baseFont;
    width: 682rem / @baseFont;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .cate,
    .login {
      width: 36rem / @baseFont;
      height: 60rem / @baseFont;
    }

    .cate {
      background: url(../images/cate.png) no-repeat;
      background-size: 36rem / @baseFont 60rem / @baseFont;
    }

    .login {
      background: url(../images/login.png) no-repeat;
      background-size: 36rem / @baseFont 60rem / @baseFont;
    }

    .search_box {
      height: 66rem / @baseFont;
      width: 522rem / @baseFont;
      background-color: white;
      border-radius: .66rem;
      opacity: .8;
      overflow: hidden;
      position: relative;

      &::before {
        content: '';
        display: block;
        width: 36rem / @baseFont;
        height: 36rem / @baseFont;
        position: absolute;
        top: 15rem / @baseFont ;
        left: 15rem / @baseFont;
        z-index: 9;
        background: url(../images/sou.png) no-repeat;
        background-size: 36rem / @baseFont 36rem / @baseFont;
      }

      input {
        position: absolute;
        top: 0;
        left: 0;
        border: 0;
        padding: 0;
        width: 100%;
        height: 66rem / @baseFont;
        font-size: 25rem / @baseFont;
        color: #757575;
        outline: none;
        padding-left: 55rem / @baseFont;
      }
    }
  }
}

// banner

.banner {
  width: 750rem / @baseFont;
  height: 368rem / @baseFont;

  img {
    width: 100%;
    height: 100%;
  }
}

// ad

.ad {
  display: flex;

  a {
    flex: 1;

    img {
      width: 100%;
    }
  }
}

// nav
nav {
  width: 750rem / @baseFont;

  &::after {
    content: '';
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
    clear: both;
  }

  a {
    width: 150rem / @baseFont;
    height: 142rem / @baseFont;
    float: left;
    text-align: center;

    img {
      display: block;
      width: 84rem / @baseFont;
      height: 84rem / @baseFont;
      margin: 10rem / @baseFont auto 5rem / @baseFont;
    }

    p {
      margin: 0;
      font-size: 25rem / @baseFont;
      color: #333;
    }
  }
}